import { useState, useEffect } from 'react';
import { Form, Input, Button, Select, DatePicker, Tooltip } from 'antd';
import AntdWrapper from '@/components/AntdWrapper';
import Iconfont from '@/components/IconFont';
import { customTrimFunc } from '@/utils/utils.jsx';
import { isEmpty } from 'lodash';
import { logisticsCompanyList } from '@/utils/config';
import { queryUserList } from '../service';

const { Option } = Select;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD HH:mm:ss';

const logisticsCompanyOption = logisticsCompanyList.map((item, index) => (
  <Option key={index} value={item}>
    {item}
  </Option>
));

const SearchContent = ({ handleSearch, handleReset }) => {
  const [userData, setUserData] = useState([]); //创建人列表
  const [form] = Form.useForm();

  useEffect(() => {
    handleUserList();
  }, []);

  //退货员列表
  const handleUserList = async (username) => {
    const { data, success } = await queryUserList({
      username,
      current: 1,
      size: 20,
    });
    if (success) {
      setUserData(data);
    }
  };

  // 点击查询按钮
  const onFinish = (val) => {
    handleSearch(customTrimFunc({ ...val }));
  };

  // 点击重置
  const onReset = () => {
    form.resetFields();
    handleReset();
  };

  //渲染交接员工
  const renderSubUser = (item) => {
    if (item.account) {
      if (item.name) {
        return item.name + '(' + item.account + ')';
      } else {
        return item.account;
      }
    } else {
      return '';
    }
  };

  const optionRefundUserList =
    !isEmpty(userData) &&
    userData.map((item) => (
      <Option key={item.account}>
        <Tooltip title={renderSubUser(item)}>{renderSubUser(item)}</Tooltip>
      </Option>
    ));

  return (
    <Form
      layout="horizontal"
      form={form}
      name="receipt-return-search"
      className="new-search-form-style"
      style={{ marginBottom: '4px' }}
      onFinish={onFinish}
      //   initialValues={{ ...query }}
    >
      <AntdWrapper label="物流单号">
        <Form.Item label="" name="logisticsNo">
          <Input placeholder="请输入物流单号" />
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper label="物流公司">
        <Form.Item label="" name="logisticsCompany">
          <Select placeholder="全部">{logisticsCompanyOption}</Select>
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper label="数据获取方式">
        <Form.Item label="" name="src">
          <Select placeholder="全部">
            <Option value="0">手动录入</Option>
            <Option value="1">接口获取</Option>
            <Option value="2">仓储APP登记</Option>
          </Select>
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper label="创建人">
        <Form.Item label="" name="createAccount">
          <Select
            showSearch
            placeholder="请选择创建人"
            filterOption={(input, option) => {
              return (
                option.children.props.children
                  .toLowerCase()
                  .indexOf(input.toLowerCase()) >= 0
              );
            }}
            onSearch={handleUserList}
            allowClear
          >
            {optionRefundUserList}
          </Select>
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper
        label={
          <span style={{ color: '#000', fontSize: '12px' }}>创建时间</span>
        }
        style={{ width: '620px' }}
      >
        <Form.Item name="time">
          <RangePicker format={dateFormat} showTime style={{ width: '100%' }} />
        </Form.Item>
      </AntdWrapper>

      <Form.Item>
        <Button
          type="primary"
          htmlType="submit"
          style={{ marginRight: '12px', height: '32px', fontSize: '12px' }}
          shape="round"
          size="default"
          icon={<Iconfont type="iconsousuo" />}
        >
          查询
        </Button>
        <Button
          className="newRoundBtn"
          onClick={onReset}
          icon={<Iconfont type="iconzhongzhi" />}
          shape="round"
          size="default"
        >
          重置
        </Button>
      </Form.Item>
    </Form>
  );
};

export default SearchContent;
